<template>
    <el-select  @change="change" v-model="vModel"
                filterable clearable
                :placeholder="placeholder"
                :remote="remote"
                :remote-method="remoteMethod"
                :multiple = "multiple"
                :allow-create="allowCreate"
                :disabled="disabled" :class="customClass">
        <el-option
                v-for="item in options"
                :key="item[valueKey || 'FID']"
                :label="item[labelKey || 'FID']"
                :value="item[valueKey || 'FName']"
                :disabled="item.disabled">
        </el-option>
    </el-select>
</template>

<script>
    import util from '../../common/util'
    export default {
        props:{
            optionData:null,
            value:null,
            multiple:{
                type:Boolean,
                default:false
            },
            labelKey:{
                type:String,
                default:"FName"
            },
            valueKey:{
                type:String,
                default:"FID"
            },
            jsonKey:{
                type:String,
                default:"options"
            },
            customClass:{
                type:String,
                default:"myClass"
            },
            placeholder:{
                type:String,
                default:"请选择"
            },
            disabled:{
                type:Boolean,
                default:false
            },
            remote:{
                type:Boolean,
                default:false
            },
            allowCreate:{
                type:Boolean,
                default:false
            },
            //extendData是比较变态的参数，保存控件的状态数据，
            // 以便change中传出去,在动态组件中使用到。比如BaseList.vue
            //TODO：这里难以理解，是不是需要重构？
            extendData:null
        },
        data() {
            return {
                vModel:this.value,
                options:[]
            };
        },
        watch:{
            value(val){
                this.vModel = val
            },
            vModel(val){
                this.$emit("input", val)
            },
            //动态可以改变数据
            optionData(val){
                //初始化之前，watch是不会触发的
                //this.vModel = null;  //为什么？  因为切换记录时？
                this.fillData(val)
            }
        },
        methods:{
            remoteMethod(query){
                if(this.remote){
                    //因为编辑时，query初始化为ID
                    let url = this.optionData + "&" + this.labelKey + "=" + query
                        + "&" + this.valueKey + "=" + query
                    this.fillData(url)
                }
            },
            change(val){
                //查找 record
                let record = {};
                for(let item of this.options){
                    if(item[this.valueKey]==val){
                        record = item
                        break
                    }
                }
                this.$emit("change",val,record,this.extendData)
            },
            fillData(val){
                if(!val){
                    return
                }
                if(typeof(val)=="string"){
                    //url模式, 带{0}表示远程搜索,初始值要为空值
                    util.get(val, {}, null, result => {
                        this.options = result[this.jsonKey]
                    })
                }else {
                    this.options=[]
                    //对象、二维数组、一维数组
                    for(let item of val){
                        if(item.constructor==Array){
                            let value = {}
                            value[this.valueKey] = item[0]
                            value[this.labelKey] = item[1]
                            this.options.push(value)
                        }else if(item.constructor==String){
                            let value = {}
                            value[this.valueKey] = item
                            value[this.labelKey] = item
                            this.options.push(value)
                        }else{ //object
                            this.options.push(item)
                        }
                    }
                }
            }
        },
        mounted() {
            if(this.remote){

            }else {
                this.fillData(this.optionData)
            }
            /*如果是整形，0 和 null 同等
             if(this.value===0){
             this.vModel = null
             }
             */
        }
    }
</script>

<style scoped>
    .myClass{
        width: 100%
    }
</style>